<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="webjars/Semantic-UI/2.4.1/semantic.css" rel="stylesheet">
    <link href="webjars/datatables/1.10.20/css/dataTables.semanticui.css" rel="stylesheet">
    <link href="webjars/datatables-buttons/1.6.1/css/buttons.semanticui.css" rel="stylesheet">
    <link href="css/responsive.semanticui.min.css" rel="stylesheet">
    <link href="css/main.css" rel="stylesheet">
    <script src="webjars/jquery/3.4.1/jquery.min.js"></script>
    <script src="webjars/Semantic-UI/2.4.1/semantic.js"></script>
    <script src="webjars/datatables/1.10.20/js/jquery.dataTables.js"></script>
    <script src="webjars/datatables/1.10.20/js/dataTables.semanticui.js"></script>
    <script src="webjars/datatables-buttons/1.6.1/js/dataTables.buttons.js"></script>
    <script src="webjars/datatables-buttons/1.6.1/js/buttons.semanticui.js"></script>
    <script src="webjars/datatables-responsive/2.2.3/js/dataTables.responsive.js"></script>
    <script src="webjars/datatables-responsive/2.2.3/js/responsive.semanticui.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sockjs-client/1.1.4/sockjs.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>
    <script src="js/main.js"></script>
    <title>Чат</title>
</head>
<body>
<div class="ui container">
    <div th:insert="~{header :: header}"></div>
    <div class="ui segment">
       <div class="ui comments">
           <div id="messages"></div>
           <div class="ui reply form">
               <div class="field">
                   <textarea id="messageTextarea"></textarea>
               </div>
               <div class="ui primary submit labeled icon button" onclick="sendMessage()"><i class="icon edit"></i>Отправить</div>
           </div>
        </div>
    </div>
    <div th:insert="~{footer :: footer}"></div>
</div>
<script>
    $(document).ready(function() {
        loadMessages();
        connect();
    });

    function loadMessages() {
        var url = "message/[[${dialogId}]]?userIdTo=[[${userIdTo}]]";
        $.ajax({
            url: url,
            type: "GET",
            success: function(data) {
                for (let i = 0; i < data.length; i++) {
                    var message =   '<div class="comment">'+
                                        '<div class="content">'+
                                            '<a class="author" href="/profile?id='+data[i].user.id+'"">'+data[i].user.name+'</a>'+
                                            '<div class="metadata">'+
                                                '<span class="date">'+data[i].creation_date+'</span>'+
                                            '</div>'+
                                            '<div class="text">'+data[i].text+'</div>'+
                                        '</div>'+
                                    '</div>';
                    $('#messages').append(message);
                }
            }
        });
    }

    function clearMessages() {
        $('#messages').html('');
    }

    var messageArea = $('#messages');
    var stompClient = null;

    function connect() {
        var socket = new SockJS('/ws');
        stompClient = Stomp.over(socket);
        stompClient.connect({}, onConnected, onError);
    }

    function onConnected() {
        stompClient.subscribe('/topic/public/[[${dialogId}]]', onMessageReceived);
    }

    function onError() {
        console.log("connection error");
    }

    function sendMessage() {
        var text = $("#messageTextarea").val();
        var userTo = {"id": [[${userIdTo}]]};
        var user = {"name": "[[${user.name}]]"};
        var data = {"text": text, "dialog_id": [[${dialogId}]], "userTo": userTo, "user": user};

        stompClient.send("/app/chat.sendMessage/[[${dialogId}]]", {}, JSON.stringify(data));
        $('#messageTextarea').val('');
    }

    function onMessageReceived(payload) {
        var data = JSON.parse(payload.body);
        
        var message =   '<div class="comment">'+
                            '<div class="content">'+
                                '<a class="author" href="/profile?id='+data.user.id+'"">'+data.user.name+'</a>'+
                                '<div class="metadata">'+
                                    '<span class="date">'+data.creation_date+'</span>'+
                                '</div>'+
                                '<div class="text">'+data.text+'</div>'+
                            '</div>'+
                        '</div>';
        $('#messages').append(message);
    }
</script>
</body>
</html>